﻿@{
    ViewBag.Title = "ScreenCapture";
}

<section id="ScreenCapture">
    <div class="clearfix">
        <a href="#" class="easyui-menubutton pull-right" data-options="menu: '#mnuList', plain: false">截图</a>
        <div id="mnuList" style="width:150px; display:none;"
            data-options="onClick: PhantomJS.ScreenCapture.MenuClick">
            <div onclick="PhantomJS.ScreenCapture.GetAll()">截取本页</div>
            <div onclick="PhantomJS.ScreenCapture.GetPartial()">截取内容</div>
            <div onclick="PhantomJS.ScreenCapture.GetPartialByFloat()" data-options="disabled: true">截取内容（优化）</div>
            <div class="menu-sep"></div>
            <div onclick="PhantomJS.ScreenCapture.GetOther()">截取其他站点页面</div>
        </div>
    </div>
    <div id="result">

    </div>
</section>

<style type="text/css">
    .border {
        -webkit-box-shadow:inset 0 0 0 2px #0094ff;
        box-shadow:inset 0 0 0 2px #0094ff;
    }
    .shotImg {
        border: 1px solid #0094ff;
    }
</style>
<script type="text/javascript">
    var PhantomJS = PhantomJS || {};
    PhantomJS.ScreenCapture = {};
    PhantomJS.ScreenCapture.MenuClick = function(item) {
        console.info(item);
    };

    PhantomJS.ScreenCapture.GetAll = function() {
        var html = [
            '<!DOCTYPE ',
            document.doctype.name,
            document.doctype.publicId ? ' PUBLIC "' + document.doctype.publicId + '"' : '',
            document.doctype.systemId ? ' "' + document.doctype.systemId + '"' : '',
            '>',
            document.head.outerHTML,
            document.body.outerHTML.replace(/<script([\s\S]*)<\/script>/img, '')
        ].join('');
        ScreenCapture(window.location.href, html);
    };
    PhantomJS.ScreenCapture.GetPartial = function () {
        $(document).find('*')
            .hover(function() {
                $('.border').removeClass('border');

                var $this = $(this);
                if ($this.find('.border').size() > 0) return;
                $this.addClass('border');
            }, function() {
                var $this = $(this);
                $this.removeClass('border');
            });
        $('body').bind('click', function () {
            var $this = $('.border');

            var html = [
                '<!DOCTYPE ',
                document.doctype.name,
                document.doctype.publicId ? ' PUBLIC "' + document.doctype.publicId + '"' : '',
                document.doctype.systemId ? ' "' + document.doctype.systemId + '"' : '',
                '>',
                document.head.outerHTML,
                $this.html()
            ].join('');
            $this.removeClass('border');
            $('body').unbind('click');
            ScreenCapture(window.location.href, html);
        });
    };
    PhantomJS.ScreenCapture.GetOther = function () {
        $.messager.prompt('Shot WebPage', 'Please enter a site path:', function (url) {
            ScreenCapture(url, '');
        });
    };

    
    function ScreenCapture(url, html) {
        var $result = $('#result', '#ScreenCapture').html('');

        $.ajax({
            url: '/Laboratory/PhantomJS/ScreenCapture/',
            type: 'POST',
            async: true,
            data: {
                url: url,
                html: html
            }
        }).then(function (data) {
            $('<div />')
                .html('<img class="shotImg" src="' + data.ImageUrl + '"/>')
                .appendTo($result);
        });
    };
</script>